<!-- 一个弹框组件 -->
<template>
  <div class="dialog">
    <header class="header">
        一个弹框
    </header>

    <main class="main">
        内容
    </main>

    <footer class="footer">
        <button>按钮</button>
    </footer>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

</script>
<style scoped>
.dialog {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: darkorange;
}
</style>